{% extends 'base.html' %}
{% block title %}
    分配表
{% endblock %}

{% block style %}
    <style>
        .layui-form-label {
            width: 80px;
        }

        .layui-input-block {
            margin-left: 120px;
        }
    </style>
{% endblock %}

{% block body %}
    <div class="from_main">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>{{ table.title }}</legend>
        </fieldset>
        <br><br>
        <form id="" class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">人员</label>
                <div class="layui-input-block" id="user">

                </div>
            </div>

            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit" style="margin: 40px 0 0 70%;">
                立即修改
            </button>
        </form>
        <input id="attrGroup" type="hidden" value="{{ attr_group }}">
    </div>



{% endblock %}


{% block script %}
    <script>

        layui.config({
            base: '{{ url_for('static', filename='layui/modules/')}}'
        }).extend({
            selectInput: 'selectInput/selectInput'
        }).use(['form', 'selectInput'], function () {
            let $ = layui.$,
                form = layui.form,
                selectInput = layui.selectInput;
            selectInput.render('#user', {
                // 容器id，必传参数
                name: 'user', // 渲染的input的name值
                hasSelectIcon: true,
                layFilter: 'user', //同layui form参数lay-filter
                layVerify: 'required', //同layui form参数lay-verify
                layVerType: '', // 同layui form参数lay-verType
                layReqText: '请填写文本', //同layui form参数lay-ReqText
                initValue: '', // 渲染初始化默认值
                placeholder: '输入或选择用户', // 渲染的inputplaceholder值
                // 联想select的初始化本地值，数组格式，里面的对象属性必须为value，name，value是实际选中值，name是展示值，两者可以一样
                invisibleMode: true,
                ignoreCase: true,
                data: {{ users|tojson }},
                hasCut: true, // 是否允许剪贴
                remoteSearch: false, // 是否启用远程搜索 默认是false，和远程搜索回调保存同步
            });


            /**
             * 监听提交
             */

            form.on('submit(submit)', function (obj) {
                let ins = selectInput.getInstance("#user");
                // 获取选中的value值
                let selectValue = ins.getValue();
                let data = {
                    user_id: selectValue.value
                }
                $.ajax({
                    method: 'post',
                    url: '/distribute/{{ pk }}', // 此处是你服务端的接口
                    type: 'POST',
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    dataType: "json",
                    success: function (data) {
                        // 此处最好直接返回取你返回的 data属性，如：data.data，这样不限制你后端返回的数据对象格式，如果整体传参，必须满足：{"code":0,"msg":"success","data":[]}
                        layer.msg('修改成功', {time: 1000, icon: 1}, function () {
                            location.href = '/index'
                        });
                    }
                })

                return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
            });
        });
    </script>
{% endblock %}